<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href = "../css/bootstrap.min.css">
    <style type="text/css">
        div{

        }
    </style>
<title>表单支持控件</title>
</head>
<body>
	<div class="container">
		<form action="#" method="post" class="form-horizontal" role="from">
			<div class="radio">
				<label><input type="radio" name="sex" value="M">男</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox"/>中国</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox" checked/>中国</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox"/>中国</label>
			</div>

			<label class="checkbox-inline">
				<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
			</label>
			<label class="checkbox-inline">
				<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
			</label>
			<label class="checkbox-inline">
				<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
			</label>
			<br>
			<label class="radio-inline">
				<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
			</label>
			<label class="radio-inline">
				<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
			</label>
			<label class="radio-inline">
				<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
			</label>
			<hr>
			<select class="form-control">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
			<br>
			<select class="form-control" multiple>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>

			<div class="form-horizontal">
				<div class="form-group">
					<label class="col-sm-2 control-label">订单号</label>
					<div class="col-sm-10">
						<p class="form-control-static">A00001</p>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">密码</label>
					<div class="col-sm-10">
						<input type="password" class="form-control"/>
					</div>
				</div>

			</div>
			<!--输入框样式-->
			<input type="text" class="form-control" autofocus placeholder="autofocus"/>
			<input type="text" class="form-control" disabled placeholder="disabled"/>
			<input type="text" class="form-control" readonly placeholder="readonly"/>

			<!--校验状态样式-->
			<div class="form-group has-success">
				<label class="control-label" for="inputSuccess1">Input with success</label>
				<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
				<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
			</div>
			<div class="form-group has-warning">
				<label class="control-label" for="inputWarning1">Input with warning</label>
				<input type="text" class="form-control" id="inputWarning1">
			</div>
			<div class="form-group has-error">
				<label class="control-label" for="inputError1">Input with error</label>
				<input type="text" class="form-control" id="inputError1">
			</div>
			<div class="has-success">
				<div class="checkbox">
					<label>
						<input type="checkbox" id="checkboxSuccess" value="option1">
						Checkbox with success
					</label>
				</div>
			</div>
			<div class="has-warning">
				<div class="checkbox">
					<label>
						<input type="checkbox" id="checkboxWarning" value="option1">
						Checkbox with warning
					</label>
				</div>
			</div>
			<div class="has-error">
				<div class="checkbox">
					<label>
						<input type="checkbox" id="checkboxError" value="option1">
						Checkbox with error
					</label>
				</div>
			</div>
			<!--状态样式+额外图标-->
			<div class="form-group has-success has-feedback">
				<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputSuccess3Status" class="sr-only">(success)</span>
				</div>
			</div>
		</form>
		<form action="#">
			<div class="form-group has-success has-feedback">
				<label class="control-label" for="inputSuccess2">Input with success</label>
				<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
				<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				<span id="inputSuccess2Status" class="sr-only">(success)</span>
			</div>

			<div class="form-group has-success has-feedback">
				<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
				<div class="input-group">
					<span class="input-group-addon">@</span>
					<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
				</div>
				<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
			</div>

			<div class="form-group has-feedback">
				<label>用户名:</label>
				<input type="text" class="form-control" name="name" placeholder="输入用户名" />
				<span class="glyphicon glyphicon-eye-open form-control-feedback" aria-hidden="true"></span>
			</div>
		<!--控件大小-->
			<input class="form-control input-lg" type="text" placeholder="input-lg"/>
			<input class="form-control input-sm" type="text" placeholder="input-lg"/>
			<select class="form-control input-lg">
				<option>1</option>
				<option>2</option>
				<option>3</option>
			</select>
			<select class="form-control input-sm">
				<option>1</option>
				<option>2</option>
				<option>3</option>
			</select>
		</form>
<!--		&lt;!&ndash;	水平表单组大小		&ndash;&gt;-->
<!--		<form class="form-horizontal">-->
<!--			<div class="form-group form-group-lg">-->
<!--				<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>-->
<!--				<div class="col-sm-10">-->
<!--					<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">-->
<!--				</div>-->
<!--			</div>-->
<!--			<div class="form-group form-group-sm">-->
<!--				<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>-->
<!--				<div class="col-sm-10">-->
<!--					<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">-->
<!--				</div>-->
<!--			</div>-->
<!--		</form>-->
		<hr>
		<div class="row">
			<div class="col-xs-2">
				<input type="text" class="form-control" placeholder="col-xs-2">
			</div>
			<div class="col-xs-3">
				<input type="text" class="form-control" placeholder="col-xs-3">
			</div>
			<div class="col-xs-4">
				<input type="text" class="form-control" placeholder="col-xs-4">
			</div>
		</div>
	</div>
</body>
</html>